useOutletContext Hook을 사용한 props 전달

✒️ 2025-05-28 10:13 내용 수정

• 공식 문서 : React Router API Reference Function useOutletContext
• <Route>에서 설정된 라우트 관계에서 부모 Route Component로부터 자식 Route Component로 props를 전달할 때 useOutletContext() Hook을 사용하여 전달할 수 있다.
  • useContext() HOOK을 사용해서 전역 state 관리 하는 것과 비슷하다.

// App.js
import './App.css';
import './styles/common.css';
import { Route, Routes } from 'react-router-dom';
import Test from 'test경로';
import SubTest from 'subtest경로';

function App() {
  return (
		<Routes>
		  <Route path="/test" element={<Test/>}>
			<Route path="subtest" element={<SubTest/>}/>
		  </Route>
		</Routes>
  );
}

export default App;

// Test.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';
import {Outlet} from 'react-router-dom';

function Test() {
    const [count, setCount] = useState(10);
    
    return(
        <Outlet context={{count, setCount}}/>
    )
}

export default Test;

// SubTest.js
import {useOutletContext} from 'react-router-dom';

function SubTest() {

    const {count, setCount} = useOutletContext();

    return(
		<div>
			{count}
		</div>
    )
}

export default SubTest;